<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>根据类型查找古籍知识</title>
    <link rel="stylesheet" href="bootstrap-4.6.1-dist/css/bootstrap.min.css">
    <style>
        body{
            background-image: url("image/background_img.jpg");
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
        }
        .badge-light:active,.badge-light:visited,.badge-light:hover{
            color: red;
            background-color: red;;
        }
    </style>
</head>
<body>
<header id="header"></header>

<div class="container" id="ancient">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/">首页</a></li>
            <li class="breadcrumb-item active" aria-current="page"><a href="ancientBook.html">古文典籍</a></li>
            <li class="breadcrumb-item active" aria-current="page" v-text="type"></li>
        </ol>
    </nav>

    <div class="row">
        <div class="col col-sm-12 col-lg-12">

            <!-- 古籍的分类类型 -->
            <div class="card">
                <div class="card-body">
                    <div class="d-flex flex-row flex-nowrap author-criteria-collapse" v-for="(value,key) in map" :key="key">
                        <div style="width:3rem;">
                            <span class="m-1 badge" v-text="key">朝代：</span>
                        </div>
                        <ul class="list-unstyled d-flex flex-row flex-wrap align-items-center w-100" id="typeId">
                            <li class="m-1 badge badge-light" v-for="v in value">
                                <a :href="'ancientBookToType.html?'+v.name" v-text="v.name"></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>


            <!-- 古籍的展示和介绍 -->
            <div class="card mt-3" v-for="a in ancient">
                <div class="card-body d-flex">
                    <a class="ml-2 d-none d-md-block" :href="'ancientDetail.html?'+a.id"><img style="height:8rem;" loading="lazy" :src="'image'+a.litpic" /></a>
                    <div class="ml-1 w-100">
                        <h4 class="card-title">《<a :href="'ancientDetail.html?'+a.id" v-text="a.title">宋朝</a>》<span style="font-size: 15px">作者:<a :href="'author.html?'+a.zuozhe" v-text="a.zuozhe">哀长吉</a> </span></h4>
                        <span class="txt" v-html="a.info">
                                <p>
                                哀长吉（生卒年不详）字叔巽，又字寿之，晚号委顺翁，崇安（今属福建）人。嘉定十三年（1220） 进士。授邵武簿，调靖江书记，秩满归隐武夷山。 有《鸡肋集》，《全宋词》辑其词六首。</p>
                                <p>
                                    王国维在《人间词话》中曾批评南宋词已成&ldquo;羔雁之具&rdquo;，意思是词已成为人们之间已相馈赠的礼品，失去了真情。这个评价有合理之处，但不免绝对。此词是祝贺他人娶媳妇的应酬之作，但写得喜气洋溢，自有一股浓郁的生活情趣。想来新人合卺之夕，当其亲朋云集、宾客满堂、语笑喧哗之际，丝竹并起，歌者执擅板引吭唱此一阕，定然平添出许多的热闹。</p>
                            </span>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<footer id="footer"></footer>
</body>
<!--引入jq代码-->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!--引入jq代码-->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="bootstrap-4.6.1-dist/js/bootstrap.min.js"></script>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入axios 实现页面的异步请求-->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    $("#header").load("common/navigation.html")
    $("#footer").load("common/footer.html")

    var type = decodeURI(location.search.split("?")[1])


    let vm_ancient = new Vue({
        el:"#ancient",
        data:{
            map:{},
            ancient:[],
            type:type
        },
        methods:{
            loadAncient:function () {
                axios({
                    url:"/djList/selectByType/"+type,
                    method:"get",
                }).then(function (r) {
                    vm_ancient.ancient = r.data
                    console.log(r.data)
                })
            }
        },
        created:function () {
            axios({
                url:"/type/mainType/allType",
                method:"get"
            }).then(function (r) {
                vm_ancient.map = r.data
                //console.log(r.data)
            })
            /* 分页处理 */
            this.loadAncient(1);
        }
    })
</script>
</html>